<!DOCTYPE html>
<html style="width:100%;height:100%;">
<head lang="en">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>微信图文列表</title>
    <link type="text/css" rel="stylesheet" href="/resources/easyui/themes/default/easyui.css">
    <link type="text/css" rel="stylesheet" href="/resources/easyui/themes/color.css">
    <link type="text/css" rel="stylesheet" href="/resources/easyui/themes/icon.css">
    <link type="text/css" rel="stylesheet" href="/resources/css/yidong.css">

    <script type="text/javascript" src="/resources/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="/resources/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="/resources/easyui/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="/resources/easyui/plugin/jquery.cookie.js"></script>
    <script type="text/javascript" src="/resources/easyui/plugin/ajaxfileupload.js"></script>
    <script type="text/javascript" src="/resources/js/Util.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $('#articleList').treegrid({
                rowStyler:function(row, index){
                    if(row && $.cookie("appId") != row.appId)
                        return 'color:gray';
                }
            });

            var pageSize = $.cookie("pageSize");
            if(!pageSize) {
                $.cookie("pageSize", 10, {expires:1});
            }
            loadArticleList($.cookie("pageSize"), 1);
            //分页操作
            var pager = $('#articleList').datagrid('getPager');
            if(pager){
                $(pager).pagination({
                    onSelectPage:function(pageNumber, pageSize){
                        loadArticleList(pageSize, pageNumber);
                    },
                    onRefresh:function(pageNumber, pageSize){
                        loadArticleList(pageSize, pageNumber);
                    },
                    onChangePageSize:function(pageSize){
                        $.cookie("pageSize", pageSize, {expires:1});
                        loadArticleList(pageSize, 1);
                    }
                })
            }
        });
        function loadArticleList(pageSize, pageNo, successFun){
            restClient('/rest/wechat/article/pageList', function(data){
                $('#articleList').treegrid("loadData", data);
                if(successFun) successFun();
            }, {pageSize:pageSize, pageNo:pageNo});
        }
        function getArticle(successFun){
            restClient('/rest/wechat/article/list', successFun);
        }
        function loadArticleCombo(defaultValue){
            var values=[];
            values.push({id:0, text:'无'});
            getArticle(function(data){
                var parentId = $('#parentId');
                if(data) {
                    for(var index in data) {
                        values.push(data[index]);
                    }
                    parentId.combobox('loadData', values);
                    if(defaultValue) {
                        parentId.combobox('setValue', defaultValue);
                    } else {
                        parentId.combobox('setValue', 0);
                    }
                }
            });
        }

        function formatPicUrl(value,row,index){
            if(row.picUrl != null) {
                if(row.picUrl){
                    return "<img width='50px' height='50px' src='"+ row.picUrl + "'/>";
                } else {
                    return row.picUrl;
                }
            }
        }

        function formatUrl(value,row,index){
            if(row.url != null) {
                if(row.url){
                    return "<a target='_blank' href='"+ row.url + "'>" + row.url + "</a>";
                } else {
                    return row.url;
                }
            }
        }
    </script>
</head>
<body onload="isLogon();" style="width:100%;height:100%;margin: 0;">
<table id="articleList" class="easyui-treegrid" style="width:100%;height:100%;"
       toolbar="#toolbar" pagination="true"
       data-options="idField:'id', treeField:'text', pageList:[10,15,20],pageSize:$.cookie('pageSize') ? $.cookie('pageSize') : 10"
       rownumbers="true" fitColumns="true" singleSelect="true">
    <thead>
        <tr>
            <th data-options="field:'text',width:100">标题</th>
            <th data-options="field:'description',width:150">描述</th>
            <th data-options="field:'picUrl',width:50, formatter:formatPicUrl">图片</th>
            <th data-options="field:'url',width:100, formatter:formatUrl">网址链接</th>
            <th data-options="field:'appId',width:100">APPID</th>
            <th data-options="field:'sort',width:100">顺序</th>
            <th data-options="field:'status',width:50,formatter:formatStatus">状态</th>
        </tr>
    </thead>
</table>
<div id="toolbar">
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newOne()">新建</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editOne()">编辑</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyOne()">删除</a>
</div>
<div id="dlg" class="easyui-dialog" style="width:400px;height:auto;padding:-20px;"
     closed="true" buttons="#dlg-buttons">
    <form id="fm" class="easyui-form" method="post" enctype="multipart/form-data">
        <div class="fitem">
            <label>父图文：</label>
            <input id="parentId" name="parentId" class="easyui-combobox easyui-validatebox"
                   data-options="valueField:'id', textField:'text', editable:false" required="true">
        </div>
        <div class="fitem">
            <label>标题：</label>
            <input id="title" name="title" class="easyui-textbox easyui-validatebox" style="width: 220px;height: 80px;"
                   required="true" data-options="missingMessage:'该输入项为必输项',multiline:true">
        </div>
        <div class="fitem">
            <label>描述：</label>
            <input id="description" name="description" class="easyui-textbox"
                   data-options="multiline:true" style="width: 220px;height: 80px;">
        </div>
        <div class="fitem">
            <label>图片：</label>
            <input id="picUrl" name="picUrl" type="file">
        </div>
        <div class="fitem" id="fmUrl">
            <label>网址链接：</label>
            <input id="url" name="url" class="easyui-textbox easyui-validatebox"
                   required="true" data-options="missingMessage:'该输入项为必输项'">
        </div>
        <div class="fitem">
            <label>APPID：</label>
            <input id="appId" name="appId" class="easyui-validatebox easyui-combobox"
                   data-options="valueField:'appId', textField:'appId', formatter:formatAppId, editable:false" required="true">
        </div>
        <div class="fitem">
            <label>顺序：</label>
            <input id="sort" name="sort" class="easyui-textbox easyui-validatebox"
                   required="true" data-options="missingMessage:'该输入项为必输项'">
        </div>
        <div class="fitem">
            <label>状态：</label>
            <select id="status" name="status" class="easyui-combobox easyui-validatebox" data-options="editable:false" required="true">
                <option value="0">启用</option>
                <option value="-1">禁用</option>
                <option value="-2">删除</option>
            </select>
        </div>
    </form>
</div>
<div id="dlg-buttons">
    <a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok" onclick="saveOne()" style="width:90px">保存</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')" style="width:90px">取消</a>
</div>
<script type="text/javascript">
    var url;
    var successMsg;
    function newOne(){
        $('#dlg').dialog('open').dialog('setTitle','新建');
        $('#title').textbox("setText", "");
        $('#description').textbox("setText", "");
        $('#url').textbox("setText", "");
        $('#sort').textbox("setText", "");
        loadArticleCombo();
        loadAppIdCombobox($('#appId'), true);
        $('#status').combobox('setValue', 0);
        url = '/rest/wechat/article/create';
        successMsg = "添加成功";
    }
    function editOne(){
        var row = $('#articleList').datagrid('getSelected');
        if (row) {
            if($.cookie("appId") == 'woshimorendeappid123' || $.cookie("appId") == row.appId) {
                $('#dlg').dialog('open').dialog('setTitle', '编辑');
                loadArticleCombo(row.parentId, row.parentId);
                loadAppIdCombobox($('#appId'), row.appId);
                $('#title').textbox("setValue", row.title);
                $('#description').textbox("setValue", row.description);
                $('#url').textbox("setValue", row.url);
                $('#sort').textbox("setValue", row.sort);
                $('#status').combobox('setValue', row.status);
                url = '/rest/wechat/article/update/' + row.id;
                successMsg = "编辑成功";
            } else {
                $.messager.show({
                    title: '温馨提醒',
                    msg: '不能编辑默认信息'
                });
            }
        }
    }
    function saveToDb(picUrl){
        var postData = $('#fm').serialize();
        if(picUrl) {
            postData = postData + '&picUrl=' + picUrl;
        }
        restClient(url, function (result) {
            if (result.success) {
                $('#dlg').dialog('close');
                loadArticleList($.cookie("pageSize"), 1, function () {
                    $.messager.show({
                        title: '温馨提醒',
                        msg: successMsg
                    });
                });
            } else {
                $.messager.show({
                    title: '温馨提醒',
                    msg: result.msg ? result.msg : result.message
                });
            }
        }, postData);
    }
    function saveOne(){
        //上传图片
        var file = $("#picUrl").val();
        if(file=="") {
            saveToDb();
        } else {
            var fileType = file.substring(file.lastIndexOf(".")+1);
            if(fileType!="png"&&fileType!="jpg"&&fileType!="jpeg"){
                $.messager.show({
                    title: '温馨提醒',
                    msg: '上传文件格式为png或jpg或jpeg'
                });
                return;
            } else {
                $.ajaxFileUpload({
                    url:'/rest/wechat/article/uploadFile',
                    secureuri:false,
                    fileElementId:'picUrl',
                    dataType:'json',
                    success:function(data, status){
                        if(status && data.msg != "") {
                            saveToDb(data.msg);
                        } else {
                            $.messager.show({
                                title: '温馨提醒',
                                msg: '图片上传失败，请联系管理员'
                            });
                        }
                    },
                    error: function (data, status, e){
                        $.messager.show({
                            title: '温馨提醒',
                            msg: '图片上传失败，请联系管理员'
                        });
                    }
                });
            }
        }
    }
    function destroyOne(){
        var row = $('#articleList').datagrid('getSelected');
        if (row) {
            if ($.cookie("appId") == 'woshimorendeappid123' || $.cookie("appId") == row.appId) {
                var msg = '确认要删除【' + row.text + '】么?';
                $.messager.confirm('确认', msg, function (r) {
                    if (r) {
                        restClient('/rest/wechat/article/delete/' + row.id, function (result) {
                            if (result.success) {
                                loadArticleList($.cookie("pageSize"), 1, function () {
                                    $.messager.show({
                                        title: '温馨提醒',
                                        msg: '删除成功'
                                    });
                                });
                            } else {
                                $.messager.show({
                                    title: '温馨提醒',
                                    msg: result.msg ? result.msg : result.message
                                });
                            }
                        });
                    }
                });
            } else {
                $.messager.show({
                    title: '温馨提醒',
                    msg: '不能编辑默认信息'
                });
            }
        }
    }
</script>
</body>
</html>